React useLayoutEffect: Synkron DOM-måling og oppdateringer

React tilbyr kraftige hooks for å håndtere sideeffekter i komponentene dine. Mens useEffect er arbeidshesten for de fleste asynkrone sideeffekter, trer useLayoutEffect inn når du trenger å utføre synkrone DOM-målinger og oppdateringer. Denne guiden utforsker useLayoutEffect i dybden, og forklarer dens formål, bruksområder og hvordan du bruker den effektivt.

Forstå behovet for synkrone DOM-oppdateringer

Før vi dykker ned i detaljene om useLayoutEffect, er det avgjørende å forstå hvorfor synkrone DOM-oppdateringer noen ganger er nødvendige. Nettleserens renderingsprosess består av flere stadier, inkludert:

• Tolking av HTML: Konverterer HTML-dokumentet til et DOM-tre.
• Rendering: Beregner stiler og layout for hvert element i DOM.
• Maling: Tegner elementene til skjermen.

Reacts useEffect-hook kjører asynkront etter at nettleseren har malt skjermen. Dette er generelt ønskelig av ytelsesgrunner, da det forhindrer blokkering av hovedtråden og lar nettleseren forbli responsiv. Det finnes imidlertid situasjoner der du trenger å måle DOM før nettleseren maler, og deretter oppdatere DOM basert på disse målingene før brukeren ser den første renderingen. Eksempler inkluderer:

• Justere posisjonen til et verktøytips basert på størrelsen på innholdet og tilgjengelig skjermplass.
• Beregne høyden på et element for å sikre at det passer innenfor en beholder.
• Synkronisere posisjonen til elementer under rulling eller endring av størrelse.

Hvis du bruker useEffect for denne typen operasjoner, kan du oppleve en visuell flimring eller et "glitch" fordi nettleseren maler den opprinnelige tilstanden før useEffect kjører og oppdaterer DOM. Det er her useLayoutEffect kommer inn i bildet.

Vi introduserer useLayoutEffect

useLayoutEffect er en React-hook som ligner på useEffect, men den kjører synkront etter at nettleseren har utført alle DOM-mutasjoner, men før den maler skjermen. Dette lar deg lese DOM-målinger og oppdatere DOM uten å forårsake visuell flimring. Her er den grunnleggende syntaksen:

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // Kode som kjøres etter DOM-mutasjoner, men før maling

    // Returner eventuelt en opprydningsfunksjon
    return () => {
      // Kode som kjøres når komponenten avmonteres eller re-rendres
    };
  }, [dependencies]);

  return (
    

      {/* Komponentinnhold */}
    
  );
}

Som useEffect, aksepterer useLayoutEffect to argumenter:

1. En funksjon som inneholder sideeffektlogikken.
2. En valgfri liste med avhengigheter. Effekten vil bare kjøre på nytt hvis en av avhengighetene endres. Hvis avhengighetslisten er tom ([]), vil effekten kun kjøre én gang, etter den første renderingen. Hvis ingen avhengighetsliste er gitt, vil effekten kjøre etter hver rendering.

Når skal man bruke useLayoutEffect

Nøkkelen til å forstå når man skal bruke useLayoutEffect er å identifisere situasjoner der du trenger å utføre DOM-målinger og oppdateringer synkront, før nettleseren maler. Her er noen vanlige bruksområder:

1. Måling av elementdimensjoner

Du kan trenge å måle bredden, høyden eller posisjonen til et element for å beregne layouten til andre elementer. For eksempel kan du bruke useLayoutEffect for å sikre at et verktøytips alltid er posisjonert innenfor visningsområdet.

import React, { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const [isVisible, setIsVisible] = useState(false);
  const tooltipRef = useRef(null);
  const buttonRef = useRef(null);

  useLayoutEffect(() => {
    if (isVisible && tooltipRef.current && buttonRef.current) {
      const buttonRect = buttonRef.current.getBoundingClientRect();
      const tooltipWidth = tooltipRef.current.offsetWidth;
      const windowWidth = window.innerWidth;

      // Beregn den ideelle posisjonen for verktøytipset
      let left = buttonRect.left + (buttonRect.width / 2) - (tooltipWidth / 2);

      // Juster posisjonen hvis verktøytipset ville gått utenfor visningsområdet
      if (left < 0) {
        left = 10; // Minimumsmargin fra venstre kant
      } else if (left + tooltipWidth > windowWidth) {
        left = windowWidth - tooltipWidth - 10; // Minimumsmargin fra høyre kant
      }

      tooltipRef.current.style.left = `${left}px`;
      tooltipRef.current.style.top = `${buttonRect.bottom + 5}px`;
    }
  }, [isVisible]);

  return (
    

       setIsVisible(!isVisible)}>Vis/skjul verktøytips
      {isVisible && (
        

          Dette er en verktøytips-melding.
        
      )}
    
  );
}

I dette eksemplet brukes useLayoutEffect til å beregne posisjonen til verktøytipset basert på knappens posisjon og dimensjonene til visningsområdet. Dette sikrer at verktøytipset alltid er synlig og ikke går utenfor skjermen. Metoden getBoundingClientRect brukes for å hente knappens dimensjoner og posisjon i forhold til visningsområdet.

2. Synkronisering av elementposisjoner

Du kan trenge å synkronisere posisjonen til ett element med et annet, for eksempel en "sticky" header som følger brukeren når de ruller. Igjen kan useLayoutEffect sikre at elementene er korrekt justert før nettleseren maler, og dermed unngå visuelle feil.

import React, { useState, useRef, useLayoutEffect } from 'react';

function StickyHeader() {
  const [isSticky, setIsSticky] = useState(false);
  const headerRef = useRef(null);
  const placeholderRef = useRef(null);

  useLayoutEffect(() => {
    const handleScroll = () => {
      if (headerRef.current && placeholderRef.current) {
        const headerHeight = headerRef.current.offsetHeight;
        const headerTop = headerRef.current.offsetTop;
        const scrollPosition = window.pageYOffset;

        if (scrollPosition > headerTop) {
          setIsSticky(true);
          placeholderRef.current.style.height = `${headerHeight}px`;
        } else {
          setIsSticky(false);
          placeholderRef.current.style.height = '0px';
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    

      

      

        
Klistret topptekst
      
      
{/* Litt innhold for rulling */}
    
  );
}

Dette eksempelet viser hvordan man lager en "sticky" header som forblir øverst i visningsområdet mens brukeren ruller. useLayoutEffect brukes til å beregne headerens høyde og sette høyden på et plassholderelement for å forhindre at innholdet hopper når headeren blir "sticky". Egenskapen offsetTop brukes til å bestemme headerens opprinnelige posisjon i forhold til dokumentet.

3. Forhindre teksthopping under innlasting av fonter

Når webfonter lastes inn, kan nettlesere i utgangspunktet vise reservefonter, noe som får teksten til å flyte på nytt når de egendefinerte fontene er lastet inn. useLayoutEffect kan brukes til å beregne høyden på teksten med reservefonten og sette en minimumshøyde for beholderen, og dermed forhindre hoppingen.

import React, { useRef, useLayoutEffect, useState } from 'react';

function FontLoadingComponent() {
  const textRef = useRef(null);
  const [minHeight, setMinHeight] = useState(0);

  useLayoutEffect(() => {
    if (textRef.current) {
      // Mål høyden med reservefonten
      const height = textRef.current.offsetHeight;
      setMinHeight(height);
    }
  }, []);

  return (
    

      
Dette er litt tekst som bruker en egendefinert font.
    
  );
}

I dette eksempelet måler useLayoutEffect høyden på avsnittselementet ved hjelp av reservefonten. Den setter deretter minHeight-stilegenskapen til den overordnede div-en for å forhindre at teksten hopper når den egendefinerte fonten lastes inn. Erstatt "MyCustomFont" med det faktiske navnet på din egendefinerte font.

useLayoutEffect vs. useEffect: Hovedforskjeller

Den viktigste forskjellen mellom useLayoutEffect og useEffect er tidspunktet for kjøring:

• useLayoutEffect: Kjører synkront etter DOM-mutasjoner, men før nettleseren maler. Dette blokkerer nettleseren fra å male til effekten er ferdig utført.
• useEffect: Kjører asynkront etter at nettleseren har malt skjermen. Dette blokkerer ikke nettleseren fra å male.

Fordi useLayoutEffect blokkerer nettleseren fra å male, bør den brukes med måte. Overdreven bruk av useLayoutEffect kan føre til ytelsesproblemer, spesielt hvis effekten inneholder komplekse eller tidkrevende beregninger.

Her er en tabell som oppsummerer hovedforskjellene:

Egenskap	useLayoutEffect	useEffect
Kjøringstidspunkt	Synkron (før maling)	Asynkron (etter maling)
Blokkering	Blokkerer nettleserens maling	Ikke-blokkerende
Bruksområder	DOM-målinger og oppdateringer som krever synkron kjøring	De fleste andre sideeffekter (API-kall, tidtakere, osv.)
Ytelsespåvirkning	Potensielt høyere (på grunn av blokkering)	Lavere

Beste praksis for bruk av useLayoutEffect

For å bruke useLayoutEffect effektivt og unngå ytelsesproblemer, følg disse beste praksisene:

1. Bruk den med måte

Bruk kun useLayoutEffect når du absolutt må utføre synkrone DOM-målinger og oppdateringer. For de fleste andre sideeffekter er useEffect det bedre valget.

2. Hold effektfunksjonen kort og effektiv

Effektfunksjonen i useLayoutEffect bør være så kort og effektiv som mulig for å minimere blokkeringstiden. Unngå komplekse beregninger eller tidkrevende operasjoner inne i effektfunksjonen.

3. Bruk avhengigheter klokt

Oppgi alltid en avhengighetsliste til useLayoutEffect. Dette sikrer at effekten kun kjører på nytt når det er nødvendig. Vurder nøye hvilke variabler som skal inkluderes i avhengighetslisten. Å inkludere unødvendige avhengigheter kan føre til unødvendige re-rendringer og ytelsesproblemer.

4. Unngå uendelige løkker

Vær forsiktig så du ikke lager uendelige løkker ved å oppdatere en tilstandsvariabel inne i useLayoutEffect som også er en avhengighet for effekten. Dette kan føre til at effekten kjører gjentatte ganger, noe som får nettleseren til å fryse. Hvis du trenger å oppdatere en tilstandsvariabel basert på DOM-målinger, bør du vurdere å bruke en ref for å lagre den målte verdien og sammenligne den med den forrige verdien før du oppdaterer tilstanden.

5. Vurder alternativer

Før du bruker useLayoutEffect, vurder om det finnes alternative løsninger som ikke krever synkrone DOM-oppdateringer. For eksempel kan du kanskje bruke CSS for å oppnå ønsket layout uten JavaScript-inngrep. CSS-overganger og animasjoner kan også gi jevne visuelle effekter uten behov for useLayoutEffect.

useLayoutEffect og server-side rendering (SSR)

useLayoutEffect er avhengig av nettleserens DOM, så den vil utløse en advarsel når den brukes under server-side rendering (SSR). Dette er fordi det ikke er noe DOM tilgjengelig på serveren. For å unngå denne advarselen kan du bruke en betinget sjekk for å sikre at useLayoutEffect kun kjører på klientsiden.

import React, { useLayoutEffect, useEffect, useState } from 'react';

function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  useLayoutEffect(() => {
    if (isClient) {
      // Kode som er avhengig av DOM
      console.log('useLayoutEffect kjører på klienten');
    }
  }, [isClient]);

  return (
    

      {/* Komponentinnhold */}
    
  );
}

I dette eksempelet brukes en useEffect-hook til å sette isClient-tilstandsvariabelen til true etter at komponenten er montert på klientsiden. useLayoutEffect-hooken kjører da kun hvis isClient er true, noe som forhindrer at den kjører på serveren.

En annen tilnærming er å bruke en egendefinert hook som faller tilbake til useEffect under SSR:

import { useLayoutEffect, useEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

Deretter kan du bruke useIsomorphicLayoutEffect i stedet for å bruke useLayoutEffect eller useEffect direkte. Denne egendefinerte hooken sjekker om koden kjører i et nettlesermiljø (dvs. typeof window !== 'undefined'). Hvis den gjør det, bruker den useLayoutEffect; ellers bruker den useEffect. På denne måten unngår du advarselen under SSR, samtidig som du utnytter den synkrone oppførselen til useLayoutEffect på klientsiden.

Globale hensyn og eksempler

Når du bruker useLayoutEffect i applikasjoner rettet mot et globalt publikum, bør du vurdere følgende:

• Ulik font-rendering: Font-rendering kan variere mellom ulike operativsystemer og nettlesere. Sørg for at layoutjusteringene dine fungerer konsekvent på tvers av plattformer. Vurder å teste applikasjonen din på ulike enheter og operativsystemer for å identifisere og rette opp eventuelle avvik.
• Høyre-til-venstre (RTL) språk: Hvis applikasjonen din støtter RTL-språk (f.eks. arabisk, hebraisk), vær oppmerksom på hvordan DOM-målinger og oppdateringer påvirker layouten i RTL-modus. Bruk logiske CSS-egenskaper (f.eks. margin-inline-start, margin-inline-end) i stedet for fysiske egenskaper (f.eks. margin-left, margin-right) for å sikre riktig layouttilpasning.
• Internasjonalisering (i18n): Tekstlengden kan variere betydelig mellom språk. Når du justerer layout basert på tekstinnhold, bør du vurdere potensialet for lengre eller kortere tekststrenger på forskjellige språk. Bruk fleksible layoutteknikker (f.eks. CSS flexbox, grid) for å imøtekomme varierende tekstlengder.
• Tilgjengelighet (a11y): Sørg for at layoutjusteringene dine ikke påvirker tilgjengeligheten negativt. Gi alternative måter å få tilgang til innhold på hvis JavaScript er deaktivert eller hvis brukeren benytter hjelpeteknologi. Bruk ARIA-attributter for å gi semantisk informasjon om strukturen og formålet med layoutjusteringene dine.

Eksempel: Dynamisk innholdslasting og layoutjustering i en flerspråklig kontekst

Se for deg en nyhetsside som dynamisk laster inn artikler på forskjellige språk. Hver artikkel sin layout må justeres basert på innholdets lengde og brukerens foretrukne fontinnstillinger. Slik kan useLayoutEffect brukes i dette scenarioet:

1. Mål artikkelinnholdet: Etter at artikkelinnholdet er lastet inn og rendret (men før det vises), bruk useLayoutEffect til å måle høyden på artikkelens beholder.
2. Beregn tilgjengelig plass: Bestem den tilgjengelige plassen for artikkelen på skjermen, med hensyn til header, footer og andre UI-elementer.
3. Juster layout: Basert på artikkelens høyde og den tilgjengelige plassen, juster layouten for å sikre optimal lesbarhet. Du kan for eksempel justere skriftstørrelse, linjehøyde eller kolonnebredde.
4. Anvend språspesifikke justeringer: Hvis artikkelen er på et språk med lengre tekststrenger, kan det hende du må gjøre ytterligere justeringer for å imøtekomme den økte tekstlengden.

Ved å bruke useLayoutEffect i dette scenarioet kan du sikre at artikkelens layout blir riktig justert før brukeren ser den, noe som forhindrer visuelle feil og gir en bedre leseopplevelse.

Konklusjon

useLayoutEffect er en kraftig hook for å utføre synkrone DOM-målinger og oppdateringer i React. Den bør imidlertid brukes med omhu på grunn av dens potensielle ytelsespåvirkning. Ved å forstå forskjellene mellom useLayoutEffect og useEffect, følge beste praksis og vurdere globale implikasjoner, kan du utnytte useLayoutEffect til å skape jevne og visuelt tiltalende brukergrensesnitt.

Husk å prioritere ytelse og tilgjengelighet når du bruker useLayoutEffect. Vurder alltid alternative løsninger som ikke krever synkrone DOM-oppdateringer, og test applikasjonen din grundig på ulike enheter og nettlesere for å sikre en konsekvent og hyggelig brukeropplevelse for ditt globale publikum.